<template>
	<view>
		<view class="headertext">
			<text>请输入手机号码</text>
		</view>
		<view class="bigbox">
			<view class="tel">
				<text>+86</text>
				<input type="number" @blur="dianwo" placeholder="请输入手机号码" v-model="thetel">
			</view>
			<view class="tishi">
				<text v-show="show">请输入正确手机号码</text>
			</view>
			<view class="testnum">
				<input type="text" placeholder="请输入验证码" v-model="thenum">
				<text @click="getNum">获取验证码</text>
			</view>
			<view class="invite">
				<input type="number" placeholder="请输入邀请码(可不填)">
			</view>
			<button type="default" class="btn" @click="zhuce">注册</button>
			<view class="abcde" @click="book"><text>注册代表同意<text class="register" @click="book">用户协议</text>和<text class="register" @click="book">隐私政策</text></text></view>
		</view>
		<image :src="numimg"></image>
	</view>
</template>

<script setup>
	import {ref,onMounted} from 'vue'
	import http from "../../utils/http";
	// import Base64 from '../../utils/base64.js'
	
	//声明手机号
	let thetel = ref('')
	//手机号验证状态
	let show = ref(false)
	//声明验证码
	let thenum = ref('')
	//验证码图片
	let numimg = ref('')
	
	
	//验证手机号失去光标函数
	const dianwo=function(){
		// show.value=true
		// console.log(show.value);
		if(!/^1[345789]\d{9}/.test(thetel.value)){
		 			show.value=true
				}else{
					show.value=false
				}
	}
	
	//跳转协议页面
	const book = ()=>{
		uni.redirectTo({
			url:'/pages/User-Agreement/User-Agreement'
		})
	}
	
	
	
	//获取验证码请求
	// const getreg=function(){
	// 	http({
	// 		url:'/varfyCode',
	// 		method:'post',
	// 		responseType: 'arraybuffer',
	// 	// responseType:ArrayBuffer
	// 	}).then((data)=>{
	// 		let base64 = new Base64()
	// 		let num = base64.encode(data)//编码 MTIzOjQ1Ng==
	// 		let num1 = base64.decode(data)//解码 '123:456'
	// 		let num2 = num1.split(":")[1] //截取冒号后面的字符串  '456'
	// 		console.log('num' ,num)
	// 		console.log('num1' , num1)
	// 		console.log('num2' , num2)
	// 		//console.log(data,111)
	// 		//const arrayBuffer = new Uint8Array(data)
	// 		//const base64 = "data:image/png;base64,"  + uni.arrayBufferToBase64(data);
	// 		//console.log(base64)
	// 		numimg.value="data:image/png;base64,"+uni.arrayBufferToBase64(num);
	// 		// console.log(numimg.value);
	// 		//let blob = new Blob([data],{type: 'image/png'})
	// 		//console.log(blob)
	// 	// 　　blobToDataURL(blob,(res)=>{
	// 	// 	　　　　console.log(res)
	// 	// 　　})
	// 		//console.log(typeof data);
	// 		// if(data.code==0){
	// 			// thenum.value= 'data:image/png;base64,'+btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '' ))
	// 			// console.log(thenum.value);
	// 		// }
	// 	})
	// }
	// // console.log(BASE_URL)
	// // const getreg=function(){
	// 	// thenum.value='http://81.68.170.93:8065'+`/varfyCode/${Str_ing}/`
	// 	 // thenum.value= 'data:image/png;base64,' +
	// 	 //        btoa(new Uint8Array(res.data.image).reduce((data, byte) => data + String.fromCharCode(byte), '' ))

	// // }
	// //点击获取验证码
	// const getNum=()=>{
	// 	getreg()
	// }
	
	// //注册
	// const zhuce=()=>{
	// 	console.log(thenum,thetel);
	// }
	
</script>

<style lang="less" scoped>
	.headertext{
		width: 750rpx;
		height: 100rpx;
		margin: 60rpx 0 60rpx;
		display: flex;
		align-items: center;
	}
	.headertext>text{
		margin-left: 60rpx;
		font-size: 40rpx;
		font-weight: 800;
	}
	//表单样式
	.bigbox{
		width: 750rpx;
		height: 800rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tel{
		height: 104rpx;
		width: 630rpx;
		border-bottom: 1px solid rgb(238, 238, 238);
		display: flex;
		align-items: center;
	}
	.tel>text{
		margin-right: 50rpx;
		color: gray;
		font-size: 28rpx;
	}
	.tishi{
		height: 30rpx;
	}
	.tishi>text{
		font-size: 26rpx;
		color: red;
	}
	input{
		font-size: 32rpx;
	}
	.testnum{
		// margin-top: 30rpx;
		height: 104rpx;
		width: 630rpx;
		border-bottom: 1px solid rgb(238, 238, 238);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.testnum>text{
		font-size: 26rpx;
		color: rgb(47, 120, 255);
	}
	.invite{
		margin-top: 30rpx;
		height: 104rpx;
		width: 630rpx;
		border-bottom: 1px solid rgb(238, 238, 238);
		display: flex;
		align-items: center;
	}
	.btn{
		margin-top: 60rpx;
		width: 660rpx;
		background-color: rgb(47, 120, 255);
		color: white;
	}
	.bigbox>.abcde{
		margin-top: 20rpx;
	}
	.bigbox>view>text{
		margin-top: 20rpx;
		font-size: 26rpx;
	}
	.register{
		color: rgb(47, 120, 255);
	}
	image{
		width: 100rpx;
		height: 50rpx;
	}
</style>
